<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('异常库存')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 200px!important;
        }
        .el-input__icon {
            line-height: 0!important;
        }
        .tag {
            display: inline-block;
            padding: 0 5px;
            line-height: 22px;
            color: #FFFFFF;
            border-radius: 3px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            批次号：<input type="text" id="materialBatchId" name="batch"/>
                        </li>
                        <li>
                            物料编码：<input type="text" id="itemCode" name="itemCode"/>
                        </li>
                        <!--                        <li>-->
                        <!--                            质检状态：-->
                        <!--                            <select name="billInState">-->
                        <!--                                <option value="">全部</option>-->
                        <!--                                <option value="1">合格</option>-->
                        <!--                                <option value="2">待检</option>-->
                        <!--                                <option value="3">不合格</option>-->
                        <!--                                <option value="4">异常</option>-->
                        <!--                            </select>-->
                        <!--                        </li>-->
                        <li>
                            <label>时间：</label>
                            <el-date-picker
                                    name="startTime"
                                    v-model="timeA"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    @change="compareAB"
                                    placeholder="开始时间">
                            </el-date-picker>
                            <span>-</span>
                            <el-date-picker
                                    name="endTime"
                                    v-model="timeB"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime"
                                    @change="compareAB"
                                    placeholder="结束时间">
                            </el-date-picker>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()" @click="resetTime()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="in:boxItem:exportRevolutionStorage">
                <i class="fa fa-download"></i> 导出全部
            </a>
            <!--            <a class="btn btn-info" @click="partExcel()" shiro:hasPermission="in:boxItem:partExcelRevolutionStorage">-->
            <!--                <i class="fa fa-download"></i> 部分导出-->
            <!--            </a>-->
            <!--            <a class="btn btn-primary" onclick="$.table.print()">-->
            <!--                <i class="fa fa-plus"></i> 打印-->
            <!--            </a>-->
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true" style="white-space: nowrap"></table>
        </div>
    </div>
</div>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var prefix = ctx + "in/boxItem";

    var app = new Vue({
        el: '.container-div',
        data: {
            timeA: '',
            timeB: ''
        },
        methods: {
            //时间对比
            compareAB: function(){
                if(this.timeA != '' && this.timeA != null){
                    if(this.timeB != '' && this.timeB != null){
                        var a = new Date(this.timeA);
                        var b = new Date(this.timeB);
                        if(a > b){
                            $.modal.alertError("结束时间需大于开始时间，请重新选择！！");
                            this.timeA = '';
                            this.timeB = '';
                        }
                    }else{
                        this.timeB = '';
                    }
                }else{
                    this.timeA = '';
                    if(this.timeB == null){
                        this.timeB = '';
                    }
                }
            },
            //清空时间
            resetTime(){
                this.timeA = '';
                this.timeB = '';
            },
            //部分导出
            partExcel(){
                var rows = $.common.isEmpty($.table._option.uniqueId) ? $.table.selectFirstColumns() : $.table.selectColumns($.table._option.uniqueId);
                if(rows.length == 0){
                    $.modal.alertWarning("请至少选择一条记录");
                    return;
                }else{
                    $.modal.confirm("确认要导出选中的" + rows.length + "条数据吗?", function(){
                        var url = prefix + "/partExcelRevolutionStorage";
                        var data = {"ids": rows.join()};
                        $.post(url, data, function(result){
                            if(result.code == web_status.SUCCESS){
                                window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
                            }else if(result.code == web_status.WARNING){
                                $.modal.alertWarning(result.msg);
                            }else{
                                $.modal.alertError(result.msg);
                            }
                            $.modal.closeLoading();
                        });
                    });
                }
            }
        }
    })

    $(function() {
        var options = {
            url: "/in/boxItem/selectBoxItemWarning",
            exportUrl: prefix + "/partExcelBoxItemWarning",
            detailUrl: "/in/boxItem/boxItemDetail",
            modalName: "异常库存",
            columns: [
                // {
                //     checkbox: true
                // },
                {
                    field: 'id',
                    title: '序号',
                    align: 'center',
                    visible: false
                },
                {
                    field: 'itemCode',
                    title: '物料编码',
                    align: 'center'
                },
                {
                    field: 'itemName',
                    title: '物料描述',
                    align: 'center'
                },
                {
                    field: 'sort',
                    title: '物料类型',
                    align: 'center',
                    formatter: function(value, row, index){
                        var actions = [];
                        if(value == 1){
                            actions.push("<span>钢材</span>");
                        }else if(value == 2){
                            actions.push("<span>铜材</span>");
                        }
                        return actions.join('');
                    }
                },
                // {
                //     field: 'billInState',
                //     title: '质检状态',
                //     align: 'center',
                //     formatter: function(value, item, index){
                //         var actions = [];
                //         if(value == 1){
                //             actions.push("<span class='tag' style='background-color: #fcb529'>合格</span>");
                //         } else if (value == 2) {
                //             actions.push("<span class='tag' style='background-color: #f8ac59'>待检</span>");
                //         }else if (value == 3) {
                //             actions.push("<span class='tag' style='background-color: #999999'>不合格</span>");
                //         }else if (value == 4) {
                //             actions.push("<span class='tag' style='background-color: red'>异常</span>");
                //         }
                //         return actions.join('');
                //     }
                // },
                // {
                //     field: 'state',
                //     title: '状态',
                //     align: 'center',
                //     formatter: function(value, item, index){
                //         var actions = [];
                //         if(value == 1){
                //             actions.push("<span class='tag' style='background-color: #fcb529'>正常</span>");
                //         } else if (value == 2) {
                //             actions.push("<span class='tag' style='background-color: #f8ac59'>冻结</span>");
                //         }else if (value == 3) {
                //             actions.push("<span class='tag' style='background-color: #999999'>入库中</span>");
                //         }
                //         return actions.join('');
                //     }
                // },
                {
                    field: 'min',
                    title: '最小报警数值',
                    align: 'center'
                },
                {
                    field: 'max',
                    title: '最大报警数值',
                    align: 'center'
                },
                {
                    field: 'weight',
                    title: '库存重量',
                    align: 'center',
                    formatter: function(value, item, index){
                        var actions = [];
                        if(value > item.max){
                            actions.push("<span style='color: red'>"+value+"</span>");
                        } else if (value < item.min) {
                            actions.push("<span style='color: red'>"+value+"</span>");
                        } else {
                            actions.push("<span>"+value+"</span>");
                        }
                        return actions.join('');
                    }
                },
                {
                    field: 'unit',
                    title: '单位',
                    align: 'center'
                },
                {
                    field: 'weight',
                    title: '预警信息',
                    align: 'center',
                    formatter: function(value, item, index){
                        var actions = [];
                        if(value > item.max){
                            actions.push("<span style='color: red'>库存过量</span>");
                        } else if (value < item.min) {
                            actions.push("<span style='color: red'>库存不足</span>");
                        }
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function open(title, url, width, height, callback){
        if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){
            width = 'auto';
            height = 'auto';
        }
        if($.common.isEmpty(title)){
            title = false;
        }
        if($.common.isEmpty(url)){
            url = "/404.html";
        }
        if($.common.isEmpty(width)){
            width = 800;
        }
        if($.common.isEmpty(height)){
            height = ($(window).height() - 250);
        }
        if($.common.isEmpty(callback)){
            callback = function(index, layero){
                var iframeWin = layero.find('iframe')[0];
                iframeWin.contentWindow.submitHandler();
            }
        }
        layer.open({
            type: 2,
            area: [width + 'px', height + 'px'],
            fix: false,
            maxmin: true,
            shade: 0.3,
            title: title,
            content: url,
            btn: ['关闭'],
            shadeClose: true,
            cancel: function(index){
                return true;
            }
        });
    }
</script>
</body>
</html>
